import { defineComponent, PropType, ref, VNode } from 'vue';
import { useRouter } from 'vue-router';
import { useNamespace } from '@ibiz-template/vue3-util';
import './auth-userinfo.scss';
import { IPanelRawItem } from '@ibiz/model-core';
import { PanelItemController } from '../../control';
import { useUIStore } from '../../util';

export const AuthUserinfo = defineComponent({
  name: 'IBizAuthUserinfo',
  props: {
    modelData: {
      type: Object as PropType<IPanelRawItem>,
      required: true,
    },
    controller: {
      type: PanelItemController,
      required: true,
    },
  },
  setup() {
    const ns = useNamespace('user-info');
    const { srfusername = '游客' } = ibiz.appData?.context || {};
    const router = useRouter();

    const isDarkTheme = ref(false);

    const htmlDom = document.querySelector('html');
    if (htmlDom) {
      if (htmlDom.classList.contains('light')) {
        isDarkTheme.value = false;
      } else if (htmlDom.classList.contains('dark')) {
        isDarkTheme.value = true;
      }
    }

    const handleSwitchChange = (newVal: boolean): void => {
      if (htmlDom) {
        const { UIStore } = useUIStore();
        const removeClass = newVal ? 'light' : 'dark';
        const addClass = newVal ? 'dark' : 'light';
        UIStore.theme = addClass;
        htmlDom.classList.remove(removeClass);
        htmlDom.classList.add(addClass);
      }
    };

    return { ns, srfusername, router, isDarkTheme, handleSwitchChange };
  },
  methods: {
    async onClick() {
      const res = await ibiz.auth.v7logout();
      if (res.ok) {
        ibiz.message.success('登出成功');
        this.router.push(
          `/login?ru=${encodeURIComponent(
            window.location.hash.replace('#/', '/'),
          )}`,
        );
      } else {
        ibiz.message.error('登出失败');
      }
    },
  },
  render() {
    return (
      <div
        class={[
          this.ns.b(),
          this.ns.m(this.modelData.id),
          ...this.controller.containerClass,
        ]}
      >
        {/* <div class={this.ns.b('theme')}>
          <el-switch
            v-model={this.isDarkTheme}
            class={this.ns.b('theme-switch')}
            inline-prompt
            active-text='暗色模式'
            inactive-text='亮色模式'
            onChange={this.handleSwitchChange}
          />
        </div> */}
        <el-dropdown>
          {{
            default: (): VNode => (
              <span class={this.ns.b('label')}>
                <el-avatar
                  class={this.ns.b('avatar')}
                  src='./assets/images/user-avatar.png'
                />
                {this.srfusername}
              </span>
            ),
            dropdown: (): VNode => (
              <el-dropdown-menu>
                <el-dropdown-item>
                  <ion-icon name='log-out-outline' class={this.ns.e('icon')} />
                  <span onClick={this.onClick}>退出登录</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            ),
          }}
        </el-dropdown>
      </div>
    );
  },
});
